<template>
    <div class="dataPageListComponent" v-if="oItem" :style="{
      paddingTop: oItem.main.wrapperPT+'px',
      paddingBottom: oItem.main.wrapperPB+'px',
      paddingLeft: oItem.main.wrapperPLR+'px',
      paddingRight: oItem.main.wrapperPLR+'px',
    }">

        <div class="content" :style="{
        paddingTop: oItem.main.modulePT+'px',
        paddingBottom: oItem.main.modulePB+'px',
        paddingLeft: oItem.main.modulePLR+'px',
        paddingRight: oItem.main.modulePLR+'px',

        backgroundColor: oItem.main.wrapperBgColor||'transparent',
        backgroundImage: oItem.main.wrapperBgImg?('url(\'' + oItem.main.wrapperBgImg + '\')'):'none',

        borderTopLeftRadius: oItem.main.wrapperBTR+'px',
        borderTopRightRadius: oItem.main.wrapperBTR+'px',
        borderBottomLeftRadius: oItem.main.wrapperBBR+'px',
        borderBottomRightRadius: oItem.main.wrapperBBR+'px',
      }">

            <div class="item" v-for="l in list" :key="l.id" :style="{
          marginBottom: oItem.main.moduleSpace+'px',
        }">

                <div class="head">
                    <div class="left">{{l.time}}</div>
                    <div class="right" :style="{color:oItem.main.dataPageLinkColor||'transparent'}">
                        <span>查看下级</span>
                        <i class="iconfont icon-anniuzujian-"></i>
                    </div>
                </div>

                <ul class="body" :style="{
            backgroundColor: oItem.main.dataPageBgColor||'transparent',
            backgroundImage: oItem.main.dataPageBgImg?('url(\'' + oItem.main.dataPageBgImg + '\')'):'none',
            borderTopLeftRadius: oItem.main.moduleBTR+'px',
            borderTopRightRadius: oItem.main.moduleBTR+'px',
            borderBottomLeftRadius: oItem.main.moduleBBR+'px',
            borderBottomRightRadius: oItem.main.moduleBBR+'px',
          }">

                    <li v-for="ll in l.list" :key="l.id+'_'+ll.id">

                        <p class="name" :style="{ color: oItem.main.titleFontColor||'transparent' }">{{ ll.name }}</p>

                        <p class="num">

                            <span class="val" :style="{ color: oItem.main.dataFontColor||'transparent' }">{{ll.num}}</span>

                            <span class="suffix" :style="{ color: oItem.main.titleFontColor||'transparent' }">{{ll.suffix}}</span>

                        </p>

                    </li>

                </ul>

            </div>

        </div>

    </div>
</template>
<script>
import Bus from "@/utils/bus";
import { mapState } from "vuex";
export default {
    name: "dataPageListComponent",
    data() {
        return {
            oItem: null,
            list: [
                {
                    id: 1,
                    time: "2020-11-07",
                    list: [
                        { id: 1, name: "实名数", num: "6", suffix: "个" },
                        {
                            id: 2,
                            name: "T+1预估有效实名",
                            num: "0",
                            suffix: "",
                        },
                        { id: 3, name: "T+7实名数", num: "0", suffix: "" },
                        { id: 4, name: "核销数", num: "9", suffix: "个" },
                        {
                            id: 5,
                            name: "T+1预估有效核销",
                            num: "4",
                            suffix: "个",
                        },
                    ],
                },
                {
                    id: 2,
                    time: "2020-11-07",
                    list: [
                        { id: 1, name: "实名数", num: "6", suffix: "个" },
                        {
                            id: 2,
                            name: "T+1预估有效实名",
                            num: "0",
                            suffix: "",
                        },
                        { id: 3, name: "T+7实名数", num: "0", suffix: "" },
                        { id: 4, name: "核销数", num: "9", suffix: "个" },
                        {
                            id: 5,
                            name: "T+1预估有效核销",
                            num: "4",
                            suffix: "个",
                        },
                    ],
                },
                // ,{
                //   id:3,time:"2020-11-07",
                //   list: [
                //     { id: 1, name: "实名数", num: "6", suffix: "个" },
                //     { id: 2, name: "T+1预估有效实名", num: "0", suffix: "" },
                //     { id: 3, name: "T+7实名数", num: "0", suffix: "" },
                //     { id: 4, name: "核销数", num: "9", suffix: "个" },
                //     { id: 5, name: "T+1预估有效核销", num: "4", suffix: "个" },
                //   ],
                // },{
                //   id:4,time:"2020-11-07",
                //   list: [
                //     { id: 1, name: "实名数", num: "6", suffix: "个" },
                //     { id: 2, name: "T+1预估有效实名", num: "0", suffix: "" },
                //     { id: 3, name: "T+7实名数", num: "0", suffix: "" },
                //     { id: 4, name: "核销数", num: "9", suffix: "个" },
                //     { id: 5, name: "T+1预估有效核销", num: "4", suffix: "个" },
                //   ],
                // }
            ],
        };
    },
    created() {},
    props: ["item", "ename", "id"],
    components: {},
    mounted() {
        this.$nextTick(() => {
            this.init();
        });
        const emitName = this.ename + this.id;
        Bus.$off(emitName);
        Bus.$on(emitName, (control) => {
            //console.log("backTopComponent被通知更新");
            this.oItem = null;
            this.$nextTick(() => {
                this.oItem = JSON.parse(control);
            });
        });
    },
    methods: {
        //页面初始化
        init() {
            this.oItem = null;
            this.oItem = JSON.parse(JSON.stringify(this.item));
        },
    },
    computed: mapState(["decorate"]),
    watch: {},
};
</script>
<style scoped lang="scss">
.dataPageListComponent {
    box-sizing: border-box;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-attachment: scroll;
    .content {
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-attachment: scroll;
        .item {
        
            display: flex;
            flex-direction: column;
            flex: 1;
            .head {
                display: flex;
                justify-content: space-between;
                height: 30px;
                margin-bottom: 5px;
                padding: 0 5px 0 10px;
                box-sizing: border-box;
                .left {
                    display: flex;
                    align-items: center;
                    opacity: 0.7;
                }
                .right {
                    font-size: 14px;
                    display: flex;
                    align-items: center;
                    color: #5683f9;
                    i {
                        font-size: 12px;
                    }
                }
            }
            .body {
              
                box-shadow: 3px 3px 3px #eee, -3px 3px 3px #eee,
                    3px -3px 3px #eee, -3px -3px 3px #eee;
                display: flex;
                flex-wrap: wrap;
                padding: 30px 0 15px;
                background-position: center center;
                background-repeat: no-repeat;
                background-size: cover;
                li {
                    width: 33.33%;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    margin-bottom: 15px;
                    .name {
                        font-size: 14px;
                        opacity: 0.7;
                        margin-bottom: 8px;
                    }
                    .num {
                        .val {
                            font-size: 22px;
                            margin-right: 2px;
                        }
                        .suffix {
                            font-size: 14px;
                            opacity: 0.7;
                        }
                    }
                }
            }
        }
    }
}
</style>
<style lang="scss">
.dataPageListComponent {
    .floatButton1 {
        position: fixed;
        z-index: 10;
        border-radius: 10px 0 0 10px;
        border: 5px solid #fff;
        border-right: 0;
        box-shadow: -3px -3px 3px #eee, -3px 3px 3px #eee, 3px -3px 3px #eee;
        width: 60px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        i {
            font-size: 24px;
            opacity: 0.9;
        }
        img {
            width: 100%;
            height: 100%;
            border-radius: 6px 0 0 6px;
        }
    }
    .floatButton1.br {
        left: auto !important;
        top: auto !important;
    }
    .floatButton1.bl {
        right: auto !important;
        top: auto !important;
    }
    .floatButton1.tr {
        left: auto !important;
        bottom: auto !important;
    }
    .floatButton1.tl {
        right: auto !important;
        bottom: auto !important;
    }
    .floatButton2 {
        position: absolute;
        z-index: 10;
        border-radius: 100%;
        border: 5px solid #fff;
        box-shadow: -3px -3px 3px #eee, -3px 3px 3px #eee, 3px -3px 3px #eee;
        width: 60px;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        i {
            font-size: 24px;
            opacity: 0.9;
        }
        img {
            width: 100%;
            height: 100%;
            border-radius: 100%;
        }
    }
    .floatButton2.br {
        left: auto !important;
        top: auto !important;
    }
    .floatButton2.bl {
        right: auto !important;
        top: auto !important;
    }
    .floatButton2.tr {
        left: auto !important;
        bottom: auto !important;
    }
    .floatButton2.tl {
        right: auto !important;
        bottom: auto !important;
    }
}
</style>
